<template>
    <div
        class="card-box">
        <slot
            v-if="$slots.title"
            name="title"></slot>
        <div
            v-else
            :style="{
                ...titleStyle
            }"
            :class="[
                'card-title',
                titleBolder ? 'bolder' : '']">
            {{ title }}</div>
        <slot
            v-if="$slots.content"
            name="content">
        </slot>
        <div
            v-else
            class="card-content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: String,
        titleBolder: {
            type: Boolean,
            default: false
        },
        titleStyle: Object
    }
};
</script>
<style scoped lang="scss">
.card-box {
    border-radius: 12px;
    width: 100%;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    background-color: #fff;
}
.card-title {
    font-size: 15px;
    padding: 10px 15px;
    border-bottom: 1px solid #e5e5e5;
}
.card-content {
    padding: 16px 15px;
}

.bolder {
    font-weight: bolder;
}
</style>
